<ion-header>
  <ion-toolbar>
    <ion-title>Change Registry</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">
  <ion-item-group *ngIf="stores$ | async as stores">
    <ion-item-divider>Default Registries</ion-item-divider>
    <ion-item
      *ngFor="let s of stores.standard"
      detail="false"
      [button]="!s.selected"
      (click)="s.selected ? '' : presentAction(s)"
    >
      <ion-avatar slot="start">
        <store-icon [url]="s.url"></store-icon>
      </ion-avatar>
      <ion-label>
        <h2>{{ s.name }}</h2>
        <p>{{ s.url }}</p>
      </ion-label>
      <ion-icon
        *ngIf="s.selected"
        slot="end"
        size="large"
        name="checkmark"
        color="success"
      ></ion-icon>
    </ion-item>

    <ion-item-divider>Custom Registries</ion-item-divider>
    <ion-item button detail="false" (click)="presentModalAdd()">
      <ion-icon slot="start" name="add" color="dark"></ion-icon>
      <ion-label>
        <ion-text color="dark">
          <b>Add custom registry</b>
        </ion-text>
      </ion-label>
    </ion-item>

    <ion-item
      *ngFor="let a of stores.alt"
      detail="false"
      [button]="!a.selected"
      (click)="a.selected ? '' : presentAction(a, true)"
    >
      <store-icon slot="start" [url]="a.url" size="36px"></store-icon>
      <ion-label>
        <h2>{{ a.name }}</h2>
        <p>{{ a.url }}</p>
      </ion-label>
      <ion-icon
        *ngIf="a.selected"
        slot="end"
        size="large"
        name="checkmark"
        color="success"
      ></ion-icon>
    </ion-item>
  </ion-item-group>
</ion-content>
